<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { mainStore } from "../store/index";
const { proxy } = getCurrentInstance();
const { $mapevent } = proxy;
const store = mainStore();
let LayerAttachmentLeft = ref(-300);

onMounted(() => {
    quest_list();
    setTimeout(() => {
        LayerAttachmentLeft.value = 108;
    }, 400);
});

let defaultCheckedKeys = ref(["01-2", "01-3", "01-5", "01-6", "01-7"]);
let treeRef = ref(null);
const defaultProps = {
    children: "children",
    label: "label",
};
let treeData = ref([
    {
        id: "01_1",
        label: "基础地图",
        disabled: true,
        children: [
            {
                id: "01-2",
                label: "卫星地图",
                children: [],
                disabled: false,
                type: 1006,
                alpha: 100,
            },{
                id: "01-3",
                label: "电子地图",
                children: [],
                disabled: false,
                type: 1008,
                alpha: 100,
            },{
                id: "01-7",
                label: "地形",
                children: [],
                disabled: false,
                type: 1009,
            },
        ],
    },
    {
        id: "02-1",
        label: "无人机地图",
        children: [],
        disabled: true,
    },
]);

const formatTooltip = (val) => {
    return val / 100;
};
function sliderInput(alpha, type) {
    $mapevent.layseAlpha(type - 1006, alpha / 100,1);
}
function treeCheckedChange(data, isChecked, n, s) {
    if (data.type == 1006 || data.type == 1008) {
        $mapevent.laysetShow(data.type, isChecked,1);
        if (!isChecked) {
            let index = defaultCheckedKeys.value.indexOf(data.id);
            defaultCheckedKeys.value.splice(index, 1);
        } else {
            defaultCheckedKeys.value.push(data.id);
        }
    } else if (data.type == 1009) {
        $mapevent.toggleTerrain(isChecked,1);
    } else if (data.type == 1023 || data.type == 1022) {
        $mapevent.f_Setmap(data.index, isChecked,1);
    }
}
function clickTree(data) {
    console.log(data);
}
function quest_list() {
    let dataList = [
        {
            createTime: "2022-12-22T11:10:25.000+00:00",
            endCreateTime: null,
            endMaptime: null,
            id: 19,
            idx: 99,
            type: 1022,
            alpha: 100,
            name: "许信",
            url: "http://zmd.yugaosu.com/map/{z}/{x}/{y}.png",
            uuid: "03c61b705f4e11eda4adfa163ed00158",
        },
        {
            createTime: "2022-12-07T10:28:05.000+00:00",
            id: 1,
            idx: 99,
            type: 1023,
            alpha: 100,
            name: "淮固",
            url: "http://hg.yugaosu.com/map/{z}/{x}/{y}.png",
            uuid: "3aa46c3a4dec11eda4adfa163ed00157",
        },
    ];
    dataList.forEach((element, indexs) => {
        let index = $mapevent.f_Setmap(element.url, "ok",1);
        treeData.value[1].children.push({
            ...element,
            label: element.name,
            index,
            id: element.id + element.idx,
        });
    });
}
let modesle = true
</script>
<template>
    <el-dialog
        id="LayerAttachment"
        :style="{ right: `${LayerAttachmentLeft}px` }"
        v-model="modesle"
        title="资源管理器"
        draggable
        :close-on-click-modal="false"
    >
        <div class="wrap">
            <el-tree
                :data="treeData"
                ref="treeRef"
                show-checkbox
                :check-strictly="true"
                node-key="id"
                :props="defaultProps"
                @node-click="clickTree"
                @check-change="treeCheckedChange"
                :default-expanded-keys="['01_1', '02-1', '04-1', '06-1']"
                :default-checked-keys="defaultCheckedKeys"
            >
                <template #default="scope">
                    <div class="custom-node">
                        <span>{{ scope.node.label }}</span>
                    </div>
                    <div
                        style="width: 66px; margin-left: 10px"
                        v-if="
                            scope.node.data.type == 1006 ||
                            scope.node.data.type == 1008 ||
                            scope.node.data.type == 1022 ||
                            scope.node.data.type == 1023
                        "
                    >
                        <el-slider
                            v-model="scope.node.data.alpha"
                            :format-tooltip="formatTooltip"
                            input-size="default"
                            @input="
                                sliderInput(
                                    scope.node.data.alpha,
                                    scope.node.data.type
                                )
                            "
                        />
                    </div>
                </template>
            </el-tree>
        </div>
    </el-dialog>
</template>

<style lang="less">
#LayerAttachment {
    position: fixed;
    z-index: 2;
    width: 280px;
    height: 55%;
    top: 0px;
    right: -300px;
    pointer-events: auto;
    border: 2px solid #006699;
    background-color: #00669957;
    transition: right 1s ease-out;
    .el-dialog__headerbtn {
        top: -2px;
    }
    .el-tree-node__content {
        color: #fff;
    }
    .el-tree-node__content:hover {
        background-color: #0066998a;
    }
    .el-dialog__header {
        width: calc(100% - 40px);
        padding: 10px 20px;
        background-color: #0066997c;
        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }
        .el-icon svg {
            color: #fff;
        }
    }
    .el-checkbox.is-disabled {
        display: none;
    }
    .el-tree {
        background-color: transparent;
    }
    .el-dialog__body {
        padding-top: 0;
        padding-bottom: 0;
        height: calc(100% - 20px - 54px);
        overflow-y: auto;
    }
    .el-tree-node:focus > .el-tree-node__content {
        background-color: #0066998a;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .el-tree-node {
        position: relative;
    }

    .el-tree-node__expand-icon.is-leaf {
        display: none;
    }

    .el-tree-node__children {
        padding-left: 16px;
    }

    .el-tree-node :last-child:before {
        height: 38px;
    }

    .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:before {
        border-left: 2px solid #014769;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .el-tree-node:after {
        border-top: 2px solid #014769;
        height: 20px;
        top: 12px;
        width: 24px;
    }
    .el-slider__button {
        width: 15px;
        height: 15px;
    }
}
</style>
